import styled from "styled-components";


export const TrycarStyle = styled.div`
    width:100%;
    /* height:100%; */
    height:calc(100vh - 3.25rem);
    .trycarContainer{
        position: relative;
        /* margin:1rem; */
        .information{
            position: absolute;
            width:100%;
            height:20rem;
            left:0;
            top:30rem; 
            z-index:5;
  
            .card{
                height:100%;
                .card_body{                                                    
                    width:90%;
                    height:60%;
                    margin:0 auto;
                    .title{
                        color:white;
                        font-size:1.5rem;
                        font-weight:700;
                        margin-bottom:5%;
                    }
                    .informations{
                        .flex_box{
                            display:flex;
                            flex-wrap:nowrap;
                            margin-bottom:.75rem;
                            .cartype{
                                padding:.5rem 0 .5rem 0;
                                width:46%;
                                height:2.5rem;
                            
                                border-bottom:1px solid #b2797c ;
                                margin-right:8%;
                                display:flex;
                                flex-direction:column;
                                justify-content:space-between;
                                .cartype_top{
                                    color:#5b5e62;
                                    font-size:.8rem;
                                }
                                .cartype_bottom{
                                    display:flex;
                                    flex-direction:row;
                                    font-weight:700;
                                    color:#ffffff;
                                    svg{
                                        margin-left:auto;
                                        width:1rem;
                                        height:1rem;
                                    }
                                }
                            }
                            .city{
                                padding:.5rem 0 .5rem 0;
                                width:46%;
                                height:2.5rem;
                               
                                border-bottom:1px solid #b2797c ; 
                                display:flex;
                                flex-direction:column;
                                justify-content:space-between;  
                                .city_top{
                                    color:#5b5e62;
                                    font-size:.8rem;
                                }
                                .city_bottom{
                                    display:flex;
                                    flex-direction:row;
                                    font-weight:700;
                                    color:#ffffff;
                                    svg{
                                        margin-left:auto;
                                        width:1rem;
                                        height:1rem;
                                    }
                                }
                            }
                        }
                        .shop{
                                padding:.5rem 0 .5rem 0;
                                width:100%;
                                height:2.5rem;
                                border-bottom:1px solid #b2797c ;   
                                display:flex;
                                flex-direction:column; 
                                justify-content:space-between;  
                                .shop_top{
                                    color:#5b5e62;
                                    font-size:.8rem;
                                }
                                .shop_bottom{
                                    display:flex;
                                    flex-direction:row;
                                    font-weight:700;
                                    color:#ffffff;
                                    svg{
                                        margin-left:auto;
                                        width:1rem;
                                        height:1rem;
                                    }
                                }
                               
                        }
                      
                    }

                }
                .card_bottom{
                    margin:0 auto;
                    margin-top:10%;
                    width:75%;
                    height:25%;
                    .topbutton{
                        width:100%;
                        height:45%;
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        background-color:#ffffff;
                        .word{
                            font-size:.8rem;
                            
                        }
                    }
                    .bottombutton{
                        width:100%;
                        height:45%;
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        .word{
                            font-size:.6rem;   
                            color:#ffffff;
                        }
                    }
                }

            }
        }
        .piccontainer{
            width:100%;
            img{
                width:100%;
            }
        }
    }

`